<template>
    <Page>
        <Topbar />
        <Content>
            <Panel style="padding: 4rem;">
                <view class="tab-demo">
                    <Tabs :data="tabs" v-model="active" @click="click">
                        <template #toolbar>
                            <view class="back" @click="back">
                                <u-icon name="arrow-left" color="#666" size="14" style="margin-right: 0.5rem;"></u-icon>
                                返回
                            </view>
                        </template>
                    </Tabs>
                </view>
            </Panel>
        </Content>
    </Page>
</template>

<script>
    import Page from "@/components/page/index.vue";
    import Topbar from "@/components/topbar/index.vue";
    import Content from "@/components/content/index.vue";
    import Panel from "@/components/panel/index.vue";
    import Empty from "@/components/empty/index.vue";
    import Button from "@/components/button/index.vue";
    import Tabs from "@/components/tabs/index";

    export default {
        components: {
            Page,
            Topbar,
            Content,
            Panel,
            Empty,
            Button,
            Tabs
        },
        data() {
            return {
                tabs: [{
                        label: '菜单1',
                        value: '菜单1'
                    },
                    {
                        label: '菜单2',
                        value: '菜单2'
                    }
                ],
                active: {
                    label: '菜单1',
                    value: '菜单1'
                },
            };
        },
        methods: {
            click(item) {
                console.log('item=>', item);
            },
            back() {
                uni.navigateBack(-1)
            },
        },
    }
</script>

<style scoped lang="scss">
    .tab-demo {
        flex: 1;
        width: 100%;
    }

    .back {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #666;
    }
</style>